<template>
  <div class="app-container">

    <el-table v-loading.body="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
      <el-table-column align="center" label="ID" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="100px" label="标题">
        <template slot-scope="scope">
          <router-link :to="'/task/edit/'+scope.row.id" class="link-type">
            <span>{{ scope.row.title }}</span>
          </router-link>
        </template>
      </el-table-column>

      <el-table-column label="发布人">
        <template slot-scope="scope">
          <span>{{ scope.row.publisher }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="100px" label="创建时间">
        <template slot-scope="scope">
          <span>{{ scope.row.create_time }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="100px" label="修改时间">
        <template slot-scope="scope">
          <span>{{ scope.row.update_time }}</span>
        </template>
      </el-table-column>

      <el-table-column class-name="status-col" label="状态" width="110">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column min-width="100px" label="操作">
        <template slot-scope="scope">
          <router-link :to="'/task/edit/'+scope.row.id" class="link-type">
            <span>
              <el-button type="primary" icon="el-icon-edit" circle/>
              <el-button type="danger" icon="el-icon-delete" circle/>
            </span>
          </router-link>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        :current-page="listQuery.page"
        :page-sizes="[10,20,30, 50]"
        :page-size="listQuery.limit"
        :total="total"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>

<script>
// import { fetchList } from '@/api/article'
import { getTaskByReleaseUserId } from '@/api/task'

export default {
  name: 'ArticleList',
  filters: {
    statusFilter(status) {
      // console.log(status+"fefefe")
      // const statusMap = {
      //   solved: '已解决',
      //   geted: '已领取',
      //   notget: '等待领取'
      // }
      // return statusMap[status]
      return 'ooooo'
    }
  },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      getTaskByReleaseUserId(this.listQuery).then(response => {
        console.log(response)
        console.log(response.data)
        this.list = response.data.items
        this.total = response.data.total
        // this.list = response.data.items
        // this.total = response.data.total
        this.listLoading = false
      })
      // fetchList(this.listQuery).then(response => {
      //   this.list = response.data.items
      //   this.total = response.data.total
      //   this.listLoading = false
      // })
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      console.log(val)
      this.listQuery.page = val
      this.getList()
    }
  }
}
</script>

<style scoped>
  /*.edit-input {*/
    /*padding-right: 100px;*/
  /*}*/

  /*.cancel-btn {*/
    /*position: absolute;*/
    /*right: 15px;*/
    /*top: 10px;*/
  /*}*/
</style>
